<template>
  <div class="container">
    <div class="add-comment">
      <img :src="avatar" alt="">
      <input type="text" placeholder="请发表你的评论" v-model="content">
      <el-button @click="Add">评论</el-button>
    </div>
    <ul v-if="this.comments.length>0">
      <li v-for="comment in this.comments">
        <img :src="comment.userbasic.avatar" alt="">
        <div class="content">
          <span class="name">{{comment.userbasic.name}}:</span>
          <span class="content">{{comment.content}}</span>
          <div class="data">{{comment.updated_at}}</div>
        </div>
        <div class="option">
          <span v-if="comment.user_id===+user_id" @click="Remove(comment)">删除</span>
          <span v-else>回复</span>
          <span @click="vote(comment)"> <i class="iconfont ls-zan1" :class="{voted:hasClick(comment.vote)}"></i>
            {{comment.vote.length}}
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import { commentAdd, commentRemove, commentRead, voteAdd } from '@/public/api'
  import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue'

  export default {
    components: {ElButton},
    props: ['post'],
    data () {
      return {
        avatar: '',
        content: '',
        comments: [],
        user_id: null,
        formInline: {user: ''}
      }
    },
    methods: {
      Init () {
        commentRead({post_id: this.post.id})
          .then(
            data => {
              this.comments = data
              console.log(this.comments)
            }
          ).catch(data => {})
      },
      Add () {
        commentAdd(
          {
            user_id: this.user_id,
            content: this.content,
            post_id: this.post.id
          }
        ).then(
          data => {
            console.log(data.status)
            if (data.status) {
              this.$message.success(`添加成功`)
              this.Init()
            }
          }
        ).catch(
//          this.$message.error(`失败`)
        )
      },
      Remove (comment) {
        console.log(comment)
        this.$confirm('确定删除', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(
          () => {
            commentRemove({id: comment.id, user_id: this.user_id})
              .then(
                data => {
                  if (data) {
                    this.$message.success(`删除成功`)
                    this.Init()
                  }
                }
              ).catch(data => {})
          }
        ).catch(
          () => {
            this.$message.info('已取消')
          }
        )
      },
      vote (comment) {
        let option = this.hasClick(comment.vote) ? 'delete' : 'add'
        voteAdd({comment_id: comment.id, user_id: this.user_id, post_id: this.post.id}, option).then(
          data => {
            if (data.status) {
              console.log('投票成功')
              this.Init()
            }
          }
        ).catch(data => {})
      },
      hasClick (votArray) {
        let id = +this.user_id
        return votArray.some(function (value, index, array) {
          return value.user_id === id
        })
      }
    },
    mounted () {
      this.Init()
      this.avatar = sessionStorage.getItem('avatar')
      this.user_id = sessionStorage.getItem('user_id')
    }
  }
</script>
<style scoped>
  template {
    background: red;
  }

  ul li {
    display: flex;
    margin: 5px 0;
    padding: 5px 0;
    /*min-height: 40px;*/
    border-top: 1px solid #989898;
  }

  .container {
    overflow: hidden;
  }

  ul {
    padding: 0 40px;
    font-size: 14px;
    max-height: 600px;
    overflow-y: scroll;
    margin-right: -20px;
  }

  ul .option span {
    cursor: pointer;
  }

  img {
    width: 35px;
    height: 35px;
  }

  .name {
    font-weight: bold;
  }

  /*.content{*/
  /*text-indent: 2em;*/
  /*}*/

  ul li .content {
    flex: 1;
    margin-left: 10px;
  }

  .option {
    /*background: red;*/
    width: 40px;
  }

  .add-comment {
    display: flex;
    padding: 15px 40px;
    border-bottom: 1px solid red;
  }

  .add-comment input {
    flex: 1;
    margin: 0 10px;
  }

  .voted {
    color: red;
  }
</style>
